import React, { Component } from 'react';
import { Detail } from './style'
import connect from './connect';
@connect
class index extends Component {
    componentDidMount() {
        this.props.GetFilmDetail(this.props.match.params.id)
    }
    render() {
        let { detailObj, pinglun, ping, pingLun, getPing } = this.props
        return (
            <Detail>
                <div className="goback" onClick={() => {
                    this.props.history.go(-1)
                }}>
                    &lt;
                </div>
                {
                    detailObj === null ?
                        '加载中...'
                        :
                        <>
                            <div className="img">
                                <img src={detailObj.poster} alt="" />
                            </div>
                            <div className="info">
                                <h3><p>{detailObj.name} <span>{detailObj.filmType.name}</span></p></h3>
                                <p>{detailObj.category}</p>
                                <p>2021-07-09上映</p>
                                <p>{detailObj.nation} | {detailObj.runtime == 0 ? '' : detailObj.runtime}分钟</p>
                                <p className="xiang">{detailObj.synopsis}</p>
                            </div>
                            <textarea name="" id="" cols="40" rows="5" value={ping.neirong} onChange={e => {
                                pingLun(e)
                            }}></textarea><br />
                            <button onClick={() => getPing(ping)}>评论</button>
                            <div className="ping">
                                <ul>
                                    {
                                        pinglun.map(item => (
                                            <li key={item.id}>
                                                <h3>{item.id}: </h3>
                                                <p>{item.neirong}</p>
                                                <br />
                                            </li>
                                        ))
                                    }
                                </ul>
                            </div>
                        </>
                }
                <footer>购票选座</footer>
            </Detail>
        );
    }
}

export default index;
